<template>
  <view class="contain">
    <view class="containCenter">
      <view class="containCenterBottom">
        <view class="containTextTop" v-if="userInfo.integral > 0">
          普通会员 
        </view>
        <view class="containTextTop" v-else>
          游客
        </view>
        <view class="containTextBottom">
          积分剩余：
          <text>{{userInfo.integral}}</text>
        </view>
        <view class="buyVipText">
          会员购买
        </view>
      </view>
      <view class="toBuyVip">
        <view class="toBuyVipContain">
          <view class="toBuyVipContainCenter">
            <!-- 第一个盒子 -->
            <view class="buyVipContainFirst" :class="{'active':active == '0'}" @click="onClick('0')">
              <view class="buyVipContainFirstTop">
                超值体验
              </view>
              <view class="buyVipContainFirstCenter">
                <view class="buyVipCenterTop">
                  <image src="@/static/my/10jf.png" mode=""></image>
                </view>
                <view class="buyVipCenterBottom">
                  ￥ 9.9
                </view>
              </view>
              <view class="buyVipContainFirstBottom">
                体验10次AI造型
              </view>
            </view>
            <!-- 第二个盒子 -->
            <view class="buyVipContainSecond" :class="{'active':active == '1'}" @click="onClick('1')">
              <view class="buyVipContainFirstTop">
                超值体验
              </view>
              <view class="buyVipContainFirstCenter">
                <view class="buyVipCenterTop">
                  <image src="@/static/my/40jf.png" mode=""></image>
                </view>
                <view class="buyVipCenterBottom">
                  ￥ 36.8
                </view>
              </view>
              <view class="buyVipContainFirstBottom">
                体验40次AI造型
              </view>
            </view>
            <!-- 第三个盒子 -->
            <view class="buyVipContainThird" :class="{'active':active == '2'}" @click="onClick('2')">
              <view class="buyVipContainFirstTop">
                超值体验
              </view>
              <view class="buyVipContainThirdTop">
                <view class="VipContainThirdTop">
                  <image src="@/static/my/100jf.png" mode=""></image>
                </view>
                <view class="buyVipCenterBottom">
                  ￥ 88.8
                </view>
              </view>
              <view class="buyVipContainThirdBottom">
                体验100次AI造型
              </view>
            </view>
            <!-- 第四个盒子 -->
            <view class="buyVipContainFourth" :class="{'active':active == '3'}" @click="onClick('3')">
              <view class="buyVipContainFirstTop">
                超值体验
              </view>
              <view class="buyVipContainThirdTop">
                <view class="VipContainThirdTop">
                  <image src="@/static/my/zssy.png" mode=""></image>
                </view>
                <view class="buyVipCenterBottom">
                  ￥ 168
                </view>
              </view>
              <view class="buyVipContainThirdBottom">
                <view class="buyVipContainThirdBottomText">
                  尽情体验AI造型
                </view>
              </view>
            </view>
          </view>
          <view class="nowToBuy">
            <view class="nowToBuyTop" @click="recharge">
              立即充值
            </view>
            <view class="nowToBuyBottom">
              充值即表示同意 <text>我型我发充值条款</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    getSelectPayResult,
    getWeixinXcxPayV3
  } from '/api/my.js'
  import {
    getUserInfo
  } from '@/api/my.js'
  import {
    reactive,
    ref
  } from 'vue';
  import {
    onShow
  } from '@dcloudio/uni-app'

  const active = ref('')
  let userInfo = ref({})

  // 支付参数
  const payParam = reactive({
    goodsInfo: '充值积分',
    payPrice: 0, //  支付金额
    ywParams: {
      integral: 0, //  积分
      isLifelong: '' //  是否终身
    },
    ywType: 'Recharge_integral' //  业务类型
  })

  // 跳转到上一页
  const goBack = () => {
    uni.navigateBack()
  }
  const onClick = (act) => {
    active.value = act
    if (act == 0) {
      payParam.payPrice = 0.01 // 9.9
      payParam.ywParams.integral = 10
      payParam.ywParams.isLifelong = false
    } else if (act == 1) {
      payParam.payPrice = 36.8
      payParam.ywParams.integral = 40
      payParam.ywParams.isLifelong = false
    } else if (act == 2) {
      payParam.payPrice = 88.8
      payParam.ywParams.integral = 100
      payParam.ywParams.isLifelong = false
    } else {
      payParam.payPrice = 168 // 168
      payParam.ywParams.isLifelong = true
    }
  }

  // 立即充值
  const recharge = () => {
    if (payParam.payPrice == 0) {
      uni.showToast({
        title: '请选择充值方式...',
        icon: 'none'
      })
      return false
    }
    payParam.ywParams = JSON.stringify(payParam.ywParams)
    getWeixinXcxPayV3(payParam).then(res => {
      let result = res.data
      payment(result)
    })
  }

  // 支付接口
  const payment = (result) => {
    let jsConfig = result.jsConfig
    let orderNo = result.orderNo
    uni.requestPayment({
      provider: 'wxpay',
      timeStamp: jsConfig.timeStamp,
      nonceStr: jsConfig.nonceStr,
      package: jsConfig.packages,
      signType: jsConfig.signType,
      paySign: jsConfig.paySign,
      success: async function(res) {
        // 查询接口
        await selectPayResult(orderNo)
        // 返回个人中心页面
        uni.navigateTo({
          url: '/pages/index/components/my/my'
        })
      },
      fail: function(err) {
        // 取消支付后 ywParams参数转json对象
        payParam.ywParams = JSON.parse(payParam.ywParams)
        console.log('fail:' + JSON.stringify(err));
      }
    });
  }

  // 支付成功之后的查询函数
  const selectPayResult = (orderNo) => {
    let params = {
      outTradeNo: orderNo
    }
    getSelectPayResult(params).then(res => {
      console.log('查询结果:', res);
    })
  }

// 获取用户信息
  const getUserData = () => {
    getUserInfo().then(res => {
      userInfo.value = res.data
    })
  }

  onShow(() => {
    getUserData()
  })
</script>

<style lang="scss" scoped>
  .contain {
    width: 100%;
    height: 100vh;


    .containCenter {
      width: 100%;
      height: 300rpx;

      .buyVipCenterBottom {
        font-size: 35rpx;
      }

      //会员信息介绍顶部
      .containCenterTop {
        width: 100%;
        height: 80rpx;
        background-color: #fff;
        display: flex;
        align-items: center;

        .containCenterText {
          width: 100%;
          height: 50rpx;
          text-align: center;
          margin-right: 30rpx;
          font-size: 40rpx;
        }
      }

      //会员信息介绍底部
      .containCenterBottom {
        width: 100%;
        height: 100%;
        background: linear-gradient(to right bottom, #fe6e30, 15%, #ff866d, #ff411c);
        padding: 20rpx 20rpx;

        .containTextTop {
          color: #fff;
          font-size: 30rpx;
        }

        .containTextBottom {
          margin-top: 20rpx;
          font-weight: 600;

          text {
            color: red;
          }
        }

        .buyVipText {
          font-weight: 600;
          margin-top: 40rpx;
          margin-left: 30rpx;
        }
      }

      .toBuyVip {
        width: 100%;
        height: 60vh;
        position: relative;
        display: flex;
        justify-content: center;

        // 会员购买区域
        .toBuyVipContain {
          width: 90%;
          height: 700rpx;
          border-radius: 20rpx;
          background-color: #fff;
          position: absolute;
          top: -10%;
          padding: 0 30rpx;
          padding-top: 40rpx;
          border: 1rpx solid gray;

          .toBuyVipContainTop {
            width: 100%;
            height: 80rpx;
            display: flex;
            align-items: center;
            font-weight: 600;
          }

          .toBuyVipContainCenter {
            width: 100%;
            height: 60%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .buyVipContainFirst {
              width: 48%;
              height: 49%;
              background-color: #fff;
              border-radius: 20rpx;
              border: 1rpx solid gray;



              .buyVipContainFirstTop {
                width: 50%;
                height: 40rpx;
                text-align: center;
                background-color: #fda38e;
                border-top-left-radius: 20rpx;
                border-bottom-right-radius: 40rpx;
                font-size: 25rpx;
                color: #fff;
                font-weight: 600;
              }

              .buyVipContainFirstCenter {
                width: 100%;
                height: 120rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-weight: 800;

                .buyVipCenterTop {
                  width: 100%;
                  height: 80rpx;
                  padding: 0 10rpx;
                  display: flex;
                  justify-content: center;

                  image {
                    width: 50%;
                    height: 100%;
                  }
                }
              }

              .buyVipContainFirstBottom {
                width: 100%;
                display: flex;
                background-color: #ff5353;
                border-bottom-left-radius: 20rpx;
                border-bottom-right-radius: 20rpx;
                justify-content: center;
                font-size: 24rpx;
                color: #fff;
              }
            }

            .active {
              background-color: #ffcfcf;
            }

            // 第二个
            .buyVipContainSecond {
              width: 48%;
              height: 48%;
              background-color: #fff;
              border-radius: 20rpx;
              border: 1rpx solid gray;

              .buyVipContainFirstTop {
                width: 50%;
                height: 40rpx;
                text-align: center;
                background-color: #fda38e;
                border-top-left-radius: 20rpx;
                border-bottom-right-radius: 40rpx;
                font-size: 25rpx;
                color: #fff;
                font-weight: 600;
              }

              // 第二个盒子
              .buyVipContainFirstCenter {
                width: 100%;
                height: 120rpx;
                // background-color: pink;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-weight: 800;

                .buyVipCenterTop {
                  width: 100%;
                  height: 70rpx;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  image {
                    width: 50%;
                    height: 100%;

                  }
                }
              }

              .buyVipContainFirstBottom {
                width: 100%;
                display: flex;
                background-color: #ff5353;
                border-bottom-left-radius: 20rpx;
                border-bottom-right-radius: 20rpx;
                justify-content: center;
                font-size: 24rpx;
                color: #fff;
              }
            }

            .active {
              background-color: #ffcfcf;
            }

            // 第三个盒子
            .buyVipContainThird {
              width: 48%;
              height: 48%;
              background-color: #fff;
              border-radius: 20rpx;
              border: 1rpx solid gray;

              // 超值体验
              .buyVipContainFirstTop {
                width: 48%;
                height: 40rpx;
                background-color: #fda38e;
                color: #fff;
                padding-left: 15rpx;
                border-top-left-radius: 20rpx;
                border-bottom-right-radius: 40rpx;
                font-size: 24rpx;
                font-weight: 600;
              }

              .buyVipContainThirdTop {
                width: 100%;
                height: 115rpx;
                // background-color: pink;
                border-top-left-radius: 20rpx;
                border-top-right-radius: 20rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-weight: 600;

                // 100积分图片
                .VipContainThirdTop {
                  width: 100%;
                  height: 100%;
                  // background-color: pink;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  image {
                    width: 60%;
                    height: 100%;
                  }

                }
              }

              .buyVipContainThirdBottom {
                width: 100%;
                height: 37rpx;
                display: flex;
                justify-content: center;
                background-color: #ff5353;
                border-bottom-left-radius: 20rpx;
                border-bottom-right-radius: 20rpx;
                color: #fff;
                font-size: 24rpx;

              }
            }

            .active {
              background-color: #ffcfcf;
            }

            // 第四个盒子
            .buyVipContainFourth {
              width: 48%;
              height: 48%;
              background-color: #fff;
              border-radius: 20rpx;
              border: 1rpx solid gray;

              // 超值体验
              .buyVipContainFirstTop {
                width: 48%;
                height: 40rpx;
                background-color: #fda38e;
                color: #fff;
                padding-left: 15rpx;
                border-top-left-radius: 20rpx;
                border-bottom-right-radius: 40rpx;
                font-size: 24rpx;
                font-weight: 600;
              }

              .buyVipContainThirdTop {
                width: 100%;
                height: 113rpx;
                // background-color: pink;
                border-top-left-radius: 20rpx;
                border-top-right-radius: 20rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-weight: 600;

                // 终身使用图片
                .VipContainThirdTop {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  image {
                    width: 70%;
                    height: 100%;
                  }
                }
              }

              .buyVipContainThirdBottom {
                width: 100%;
                height: 38rpx;
                display: flex;
                justify-content: center;
                background-color: #ff5353;
                border-bottom-left-radius: 20rpx;
                border-bottom-right-radius: 20rpx;
                font-size: 24rpx;
                color: #fff;
              }
            }

            .active {
              background-color: #ffcfcf;
            }
          }

          .nowToBuy {
            margin-top: 50rpx;

            // 立即充值按钮
            .nowToBuyTop {
              width: 100%;
              height: 80rpx;
              border-radius: 20rpx;
              background: linear-gradient(to right, #ff3709, 20%, #fc816d, #fe974f);
              display: flex;
              justify-content: center;
              align-items: center;
              color: #fff;
              font-weight: 600;
            }

            .nowToBuyBottom {
              font-weight: 600;
              width: 100%;
              height: 80rpx;
              // background-color: pink;
              display: flex;
              justify-content: center;
              align-items: center;

              text {
                color: #f0df91;
              }
            }
          }
        }
      }
    }
  }
</style>